.butterbar {
  position: relative;
  margin-bottom: -@butterbar-height;
  height: @butterbar-height;

  .bar {
    position: absolute;
    height: 0;
    width: 100%;
    text-indent: -9999px;
    background-color: @brand-info;

    &:before {
      content: "";
      height: @butterbar-height;
      position: absolute;
      left: 50%;
      right: 50%;
      background-color: inherit;
    }
  }
}

.butterbar.active {
  -webkit-animation: changebar @butterbar-time*3 infinite @butterbar-time;
  -moz-animation: changebar @butterbar-time*3 infinite @butterbar-time;
  animation: changebar @butterbar-time*3 infinite @butterbar-time;

  .bar {
    -webkit-animation: changebar @butterbar-time*3 infinite;
    -moz-animation: changebar @butterbar-time*3 infinite;
    animation: changebar @butterbar-time*3 infinite;

    &:before {
      -webkit-animation: movingbar @butterbar-time infinite;
      -moz-animation: movingbar @butterbar-time infinite;
      animation: movingbar @butterbar-time infinite;
    }
  }
}

/* Moving bar */
@-webkit-keyframes movingbar {
  0% {
    left: 50%;
    right: 50%
  }

  99.9% {
    left: 0%;
    right: 0%
  }

  100% {
    left: 50%;
    right: 50%
  }
}

@-moz-keyframes movingbar {
  0% {
    left: 50%;
    right: 50%
  }

  99.9% {
    left: 0%;
    right: 0%
  }

  100% {
    left: 50%;
    right: 50%
  }
}

@keyframes movingbar {
  0% {
    left: 50%;
    right: 50%
  }

  99.9% {
    left: 0%;
    right: 0%
  }

  100% {
    left: 50%;
    right: 50%
  }
}

/* change bar */
@-webkit-keyframes changebar {
  0% {
    background-color: @brand-info
  }

  33.3% {
    background-color: @brand-info
  }

  33.33% {
    background-color: @brand-warning
  }

  66.6% {
    background-color: @brand-warning
  }

  66.66% {
    background-color: @brand-primary
  }

  99.9% {
    background-color: @brand-primary
  }
}

@-moz-keyframes changebar {
  0% {
    background-color: @brand-info
  }

  33.3% {
    background-color: @brand-info
  }

  33.33% {
    background-color: @brand-warning
  }

  66.6% {
    background-color: @brand-warning
  }

  66.66% {
    background-color: @brand-primary
  }

  99.9% {
    background-color: @brand-primary
  }
}

@keyframes changebar {
  0% {
    background-color: @brand-info
  }

  33.3% {
    background-color: @brand-info
  }

  33.33% {
    background-color: @brand-warning
  }

  66.6% {
    background-color: @brand-warning
  }

  66.66% {
    background-color: @brand-primary
  }

  99.9% {
    background-color: @brand-primary
  }
}